<template>
    <!-- 实名认证弹窗 -->
    <uni-popup ref="popup" background-color="#fff" :type="type" :is-mask-click="false">
        <view class="box_16">
            <view class="text-wrapper_9">
                <text lines="1" class="text_29">请确认身份信息</text>
            </view>
            <view class="text-wrapper_10">
                <text lines="1" class="text_30">{{ name}}</text>
                <text lines="1" class="text_31">乘客姓名</text>
            </view>
            <view class="text-wrapper_11">
                <text lines="1" decode="true" class="text_32">{{idNo }}&nbsp;&nbsp;{{ idType}}</text>
                <text lines="1" class="text_33">身份信息</text>
            </view>
            <view class="group_3">
                <view class="box_17" :style="{width:left + '%'}">
                    <view class="box_18"></view>
                </view>
            </view>
            <view class="text-wrapper_12">
                <text lines="1" class="text_34">正在为您核验乘客信息…</text>
                <text lines="1" class="text_35">{{ left }}%</text>
            </view>
        </view>
    </uni-popup>
</template>

<script>
export default {
    name: "progress",
    props: {
        name: String,
        idType: String,
      idNo: [String, Number],
    },
	data() {
		return {
			  type: 'center',
        left: 0,
        time: null
		}
	},
    methods: {
        open() {
          console.log('大卡司了')
           this.$refs.popup.open()
            this.time = setInterval(() => {
                if (this.left < 99) {
                    this.left++
                }
            },500)
        },
        close() {
            this.left = 100
            clearInterval(this.time)
            this.$refs.popup.close()
        }
    }
}
</script>

<style scoped>

      .box_16 {
          border-radius: 20rpx;
          width: 660rpx;
          display: flex;
          flex-direction: column;
          padding-bottom: 66rpx;
      }
      .text-wrapper_9 {
          height: 120rpx;
          border-radius: NaNrpx;
          background-color: rgba(254,208,76,1);
          display: flex;
		  align-items: center;
		  text-align: center;
          width: 660rpx;
		  color: rgba(51,51,51,1);
		  font-size: 32rpx;
		  font-family: PingFangSC-Medium;
      }
      .text-wrapper_10 {
          width: 212rpx;
          height: 40rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          margin: 48rpx 0 0 418rpx;
      }
      .text_30 {
          width: 84rpx;
          height: 40rpx;
          display: inline-block;
          overflow-wrap: break-word;
          color: rgba(51,51,51,1);
          font-size: 28rpx;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 40rpx;
          text-align: right;
      }
      .text_31 {
          width: 112rpx;
          height: 40rpx;
          display: inline-block;
          overflow-wrap: break-word;
          color: rgba(153,153,153,1);
          font-size: 28rpx;
          font-family: PingFangSC-Regular;
          white-space: nowrap;
          line-height: 40rpx;
          text-align: right;
      }
      .text-wrapper_11 {
          width: 600rpx;
          height: 40rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          margin: 34rpx 0 0 30rpx;
      }
      .text_32 {
          width: 472rpx;
          height: 40rpx;
          display: inline-block;
          overflow-wrap: break-word;
          color: rgba(51,51,51,1);
          font-size: 28rpx;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 40rpx;
          text-align: right;
      }
      .text_33 {
          width: 112rpx;
          height: 40rpx;
          display: inline-block;
          overflow-wrap: break-word;
          color: rgba(153,153,153,1);
          font-size: 28rpx;
          font-family: PingFangSC-Regular;
          white-space: nowrap;
          line-height: 40rpx;
          text-align: right;
      }
      .group_3 {
          height: 36rpx;
          border-radius: 18rpx;
          background: #FDF1D1;
          display: flex;
          flex-direction: column;
          width: 600rpx;
          margin: 0 auto;
          margin-top: 70rpx;
          position: relative;
      }
      .box_17 {
          height: 36rpx;
          border-radius: 18rpx;
          background: linear-gradient(180deg, #FF8A52 0%, #E9550E 100%);
          display: flex;
          flex-direction: column;
          width: 0;
          position: absolute;
          left: 0;
          top: 0;
          overflow: hidden;
      }
      .box_18 {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 10rpx;
          width: 8rpx;
          height: 8rpx;
          background-color: rgba(255,255,255,1);
          border-radius: 50%;
          display: flex;
          flex-direction: column;
      }
      .text-wrapper_12 {
          width: 600rpx;
          height: 32rpx;
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          margin: 30rpx 0 0 30rpx;
      }
      .text_34 {
          width: 264rpx;
          height: 24rpx;
          display: inline-block;
          overflow-wrap: break-word;
          color: rgba(102,102,102,1);
          font-size: 24rpx;
          font-family: PingFangSC-Regular;
          white-space: nowrap;
          line-height: 24rpx;
          text-align: left;
          margin-top: 4rpx;
      }
      .text_35 {
          width: 72rpx;
          height: 32rpx;
          display: inline-block;
          overflow-wrap: break-word;
          color: rgba(253,207,74,1);
          font-size: 32rpx;
          font-family: PingFangSC-Semibold;
          white-space: nowrap;
          line-height: 32rpx;
          text-align: left;
      }
</style>
